<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <input v-model="message" type="text">
        <p>{{message}}</p>

        <div>
            <p>用户名：<input v-model="user.name" type="text"></p>
            <p>性别<input v-model="user.sex" type="text"></p>
            <p>联系方式：<input v-model="user.phone" type="text"></p>
            <p>地址：<input v-model="user.address" type="text"></p>
            <button @click="save(user)">保存</button>
        </div>

        <table v-if="users.length!=0">
            <tr>
                <th>用户名</th>
                <th>性别</th>
                <th>联系方式：</th>
                <th>地址：</th>
            </tr>
            <tr v-for="(item,index) in users " :key="index">
                <td>{{item.name}}</td>
                <td>{{item.sex}}</td>
                <td>{{item.phone}}</td>
                <td>{{item.address}}</td>
                <td><button @click="del(index)">删除</button></td>
            </tr>
        </table>


    </div>
</body>
</html>
<script>
    new Vue({
        el:'#app',
        data:{
            message:'',
            user:{
            },
            users:[]
        },
        methods:{
            save(user){
                this.user={}
                this.users.push(user)
            },
            del(index){
                this.users.splice(index,1)
            }
        }
    })
</script>